:root {
  --padding: 20px;
  --padding2: 10px;
  --back: white;
}


html{
	margin: 0;
	padding: 0;
	height: 100%;

	font-family: 'Poppins', sans-serif;
	/*background: rgb(2,0,36);
	background: linear-gradient(5deg, rgba(2,0,36,1) 17%, rgba(0,0,0,1) 72%);*/
	background: black;
 	scroll-behavior: smooth;
 	scroll-padding-top: 14vh;
 	overflow: scroll;
}

	


body
{
	margin: 0;
  padding: 0;
  width: 100%;
}




.header
{
	
	position:fixed;
  	top: 0; /* vaut mieux fixer les valeurs par défaut pour ne pas avoir de mauvaises surprises */
  	left: 0;
  	right: 0;
  	/*background: black;*/
  	 -webkit-backdrop-filter: blur(10px);
  	backdrop-filter: blur(10px);
  	z-index: 100;
  	height: 14vh;
 	min-height: 100px;
}

#logo
{
	height: 8vh;
	position: relative;
	left: 5%;
	top: 3vh;
}






.boutonsFlex
{
	position: absolute;
	width: 70%;
	height: 50%;
	right: 0%;
	top: 40%;

	display: flex;
	flex-direction: row-reverse;
	justify-content: space-around;
	column-gap: 2vw;
	
	
	vertical-align: middle;

}

.boutons
{
	text-align: center;
	
	position: relative;

	text-decoration: none;
	color: white;
	font-size: 1.4vh;
}

.boutons:hover
{
	text-decoration: underline;
}


#corps
{
	background-color: whitesmoke;
	position: relative;
}

#corps h1 {
	margin: 0;
	padding: 0;

}

#corps p {
	text-align: justify;
}

#corps p span{
	font-weight: bolder;
}



.partie_une
{
	position: relative;
	margin-top: 7vh;
	color: white;
	height: 93vh;
	background: black;
}

#titre
{
	text-align: center;
	font-size: 300%;
	position: relative;
	top: 25%;
	font-family: 'Montserrat', sans-serif;
}

#svg{
	
	width: 100%;
	position: absolute;
	bottom: 0;
}

#bienvenue
{
	text-align: center;
	font-size: 150%;

	position: relative;
	top: 30%;
}

#scroll_down_button
{
	text-align: center;

	display: block;
	position: relative;
	width: 20%;
	left: 40%;
	top: 45%;

	filter: invert(100%);

	transition: filter 0.2s;
	
}

#scroll_down_button:hover
{
	filter: invert(50%);
}

#scroll_down_button > img
{
	width: 100%;
}





.partie_deux
{
	display: none;
	background-color: var(--back);
	padding: var(--padding);
}

#nos_jeux_titre
{
	font-family: 'Montserrat', sans-serif;
	position: relative;
	text-align: center;
}


.presentoir_jeux
{
	display: flex;
	flex-direction: row;
	justify-content: space-around;

	gap: var(--padding);
}

.presentoir_jeux::-webkit-scrollbar {
  width: 16px;
}

.presentoir_jeux::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 100px;
}

.presentoir_jeux::-webkit-scrollbar-thumb {
  background-color: black;
  border-radius: 100px;
}

.presentoir_jeux{
  scrollbar-width: thin;
  scrollbar-color: black;
}


.jeux
{
	display: none;
}

.jeuxM
{
	width: 150px;
	display: inline;
	border-radius: 15px;
}
.jeuxM p{
	display: none;
}
.jeuxM img
{
	aspect-ratio: 1/1;
	object-fit: cover;
	width: 100%;
	border-radius: 15px;
}

#separateur
{
	width: 80%;
	margin-left: 10%;

	height: 2px;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 3px;
}






.partie_trois

{
display: none;
	background-color: var(--back);

	padding: 5%;

	flex-direction: column;
	row-gap: 40px;

}



.partie_trois h1

{

	text-align: center;

	font-family: 'Montserrat', sans-serif;

}



.partie_trois p

{

	font-size: 4.5vw;
	width: 90%;

	position: relative;
	left: 5%;
}

.partie_trois #hyperlienImage
{
	display: block;

	position: relative;

	left: 50%;

	width: 90%;

	transform: translateX(-50%);
}


.partie_trois img
{

	width: 100%;
	border-radius: 15px;
filter: blur(5px);

}



.partie_trois a p 
{
	font-family: 'Montserrat', sans-serif;

	font-size: 4.5vw;
	width: initial;
	color: White;
	font-weight: bolder;
	display: initial !important;

	margin: 0;

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
}

.partie_trois #hyperlien

{

	display: none;

}








.partie_quatre
{
background-color: var(--back);

	padding: var(--padding);

	display: flex;
	flex-direction: column;
	row-gap: var(--padding);
}

.partie_quatre p{

	font-size: 4.5vw;
	width: 90%;
	margin-left: 5%;
	margin-bottom: 0;
	margin-top: 0;
}
.partie_quatre #capturesGrid

{

	position: relative;

	width: 90%;

	left: 5%;
	gap: var(--padding);
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-row: 1fr 1fr;


}

.partie_quatre #capturesGrid img{
	width: 100%;
	border-radius: 15px;
}



#rebondFlex
{
	display: flex;
	justify-content: center;
	gap: 5%;
}

#rebondFlex h1
{
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}


#rebondFlex #logoParent
{
	width: 15%;
	align-content: center;
}

#rebondFlex img{

	width: 100%;
	border-radius: 15px;
	aspect-ratio: 1/1;

}

.partie_quatre a

{

	display: block;
	width: fit-content;
	padding-left: 5%;
	padding-right: 5%;
	background-color: black;

	position: relative;
	left: 50%;
	transform: translateX(-50%);

	border: solid 3px black;
	border-radius: 15px;
	padding-inline: var(--padding);
	padding-block: var(--padding2);



	font-size: 4.5vw;

	text-align: center;

	text-decoration: none;

	color: white;




	transition: background-color 0.2s, color 0.2s;



}

.partie_quatre a:hover, .partie_quatre a:active

{

	background-color: transparent;

	color: black;

}








.partie_cinq
{
background-color: var(--back);

	padding: var(--padding);

	display: flex;
	flex-direction: column;
	row-gap: var(--padding);
}

.partie_cinq p{

	font-size: 4.5vw;
	width: 90%;
	margin-left: 5%;
	margin-top: 0;
	margin-bottom:0;
}
.partie_cinq iframe
{
	position: relative;
	width: 90%;
	left: 5%;
	height: 200px !important;
}


#blendinFlex
{
	display: flex;
	justify-content: center;
	gap: 5%;
}

#blendinFlex h1
{
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}


#blendinFlex #logoParent
{
	width: 15%;
	align-content: center;
}

#blendinFlex img{

	width: 100%;
	border-radius: 15px;
	aspect-ratio: 1/1;

}

.partie_cinq a

{

	display: block;
	width: fit-content;
	padding-left: 5%;
	padding-right: 5%;
	background-color: black;

	position: relative;
	left: 50%;
	transform: translateX(-50%);

	border: solid 3px black;
	border-radius: 15px;
padding-inline: var(--padding);
	padding-block: var(--padding2);


	font-size: 4.5vw;

	text-align: center;

	text-decoration: none;

	color: white;




	transition: background-color 0.2s, color 0.2s;



}

.partie_cinq a:hover, .partie_cinq a:active

{

	background-color: transparent;

	color: black;

}







.partie_six
{
	background-color: var(--back);
	padding: var(--padding);
}

#nous_titre
{
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}



.nous_grid
{
	margin-top: var(--padding);
	display: flex;
	flex-direction: column-reverse;
	gap:var(--padding);
}

#nous_logo
{
	filter: invert(100%);

	width: 80%;

	position: relative;
	left: 50%;
	transform: translateX(-50%);
}


#nous_description
{
	width: 90%;
	margin-left: 5%;
	font-size: 4.5vw;
}